<template>
    <van-nav-bar title="重置密码" left-text="" left-arrow @click-left="onClickLeft" />

    <br>
    <van-tabs v-model:active="active" type="line">
        <van-tab title="1.验证手机号码">
            <van-cell-group inset>
                <van-field v-model="phone" center clearable left-icon="phone-o" label="手机号" placeholder="请输入手机号码">

                </van-field>
                <van-field v-model="code" center clearable left-icon="envelop-o" label="验证码" placeholder="输入短信验证码">
                    <template #button>
                        <van-button size="small" type="primary" @click="SendCode">获取验证码</van-button>
                    </template>
                </van-field>
            </van-cell-group>
            <van-button id="next" round block type="primary" native-type="submit" @click="next">
                下一步
            </van-button>
        </van-tab>

        <van-tab title="2.设置新密码">
            <van-cell-group inset>
                <van-field v-model="new_pwd" center clearable left-icon="goods-collect-o" label="新密码"
                    placeholder="请设置6-20位新的登录密码">

                </van-field>
                <van-field v-model="new_pwd_con" center clearable left-icon="goods-collect-o" label="确认新密码"
                    placeholder="请再次输入新的登陆密码">

                </van-field>
            </van-cell-group>
            <van-button id="next" round block type="primary" native-type="submit">
                提交
            </van-button>
        </van-tab>
    </van-tabs>
</template>

<script setup>
import axios from 'axios';
import { ref, reactive, onMounted } from 'vue'
const onClickLeft = () => history.back()
let phone = ref()
let code = ref()
let new_pwd = ref()
let new_pwd_con = ref()
let active = ref(0)

function next() {
    active.value = 1
}

function SendCode() {
    axios({
        method: 'post',
        url: 'http://127.0.0.1:8000/sendcode/',
        data: {
            phone: phone.value
        }
    }).then(res => {
        console.log(res.data)
    }).catch(err => {
        console.log(err)
    })
}

</script>
<style scoped>
#next {
    margin-top: 30px;
    width: 90%;
    margin-left: 15px;
}
</style>